<template>
	<div>
		<label-list :tableData="tableData" @add="add" @del="del" @set="set" />
		<el-dialog v-if="dialogVisible" :title="type" :visible.sync="dialogVisible" width="40%">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="标签名称" prop="label_name">
					<el-input v-model="ruleForm.label_name"></el-input>
				</el-form-item>
				<el-form-item label="排序" prop="order">
					<el-input-number v-model="ruleForm.order" controls-position="right" :min="0" :max="10"></el-input-number>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="resetForm">取 消</el-button>
				<el-button type="primary" @click="submitForm">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { getQuestionLabel, addQuestionLabel, delQuestionLabel, getCheckTab, setCheckTab } from '@/api/questions';
export default {
	data() {
		return {
			tableData: [],
			dialogVisible: false,
			type: '',
			ruleForm: {
				label_name: '',
				order: 0,
			},
			rules: {
				label_name: [{ required: true, message: '请输入标签', trigger: 'blur' }],
				order: [{ required: true, message: '请输入排序', trigger: 'change' }],
			},
			id: ''
		};
	},
	components: {},
	created() {
		this.getQuestionLabel();
	},
	activated() {
		this.getQuestionLabel();
	},
	methods: {
		async getQuestionLabel() {
			this.tableData = await getQuestionLabel();
		},
		add() {
			this.type = '添加标签';
			this.dialogVisible = true;
		},
		async del(id) {
			await delQuestionLabel(id);
			this.getQuestionLabel();
		},
		submitForm() {
			this.$refs.ruleForm.validate(async (valid) => {
				if (valid) {
					if (this.type === '添加标签') {
						await addQuestionLabel(this.ruleForm);
						this.$message.success('添加成功');
					} else {
						await setCheckTab(this.ruleForm, this.id);
						this.$message.success('修改成功');
					}
					this.resetForm();
					this.getQuestionLabel();
				} else {
					return false;
				}
			});
		},
		resetForm() {
			this.$refs.ruleForm.resetFields();
			this.dialogVisible = false;
		},
		async set(id) {
			this.type = '';
			this.id = id
			this.ruleForm = await getCheckTab(id);
			this.dialogVisible = true;
		},
	},
	computed: {},
	watch: {},
};
</script>

<style scoped></style>
